<template>
  <div id="jieshao">
    <div class="jieshao">
      <!--  -->
      <div
        :class="{ 'active': sxs==item.id }"
        @click="scs(item.id)"
        v-for="item in active"
        :key="item.id"
      >
        {{ item.title }}
      </div>
    </div>
    <div class="jiSh">
        <slot></slot>
    </div>
  </div>
</template>
<script>
// import  from ''
// import  from ''
export default {
  props: ["active"],
  data() {
    return {
      sxs: 0,
    };
  },
  methods: {
    scs(id) {
      this.$emit("BtnClick", id);
      this.sxs = id;
    },
  },
};
</script>
<style lang="scss" scoped>
.jieshao {
  width: 100%;
  height: 50px;
  background-color: white;
  margin-top: 20px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-size: 15px;
  > div {
    padding: 12px;
  }
}
.active {
  border-bottom: 2px solid rgb(235, 97, 0);
}
.jiSh{
    font-size: 20px;
}
</style>